<template>
    <el-col :span="12">
        <img src='../assets/1.png' alt="Logo" class="logo">
        <el-menu default-active="0">
            <RouterLink v-for="(item, index) in links" :key="index" :to="item.link">
                <el-menu-item :index="String(index)">
                    <el-icon><component :is="item.icon" /></el-icon>
                    <span>{{ item.name }}</span>
                </el-menu-item>
            </RouterLink>
            
            <!-- 添加更多选项的下拉菜单 -->
            <el-sub-menu index="more">
                <template #title>
                    <el-icon><More /></el-icon>
                    <span>更多</span>
                </template>
                <el-menu-item @click="submit">
                    <el-icon><SwitchButton /></el-icon>
                    <span>退出登录</span>
                </el-menu-item>
                <el-menu-item @click="handleAbout">
                    <el-icon><InfoFilled /></el-icon>
                    <span>关于</span>
                </el-menu-item>
            </el-sub-menu>
        </el-menu>
    </el-col>
</template>

<script lang="ts" setup>
import { More, SwitchButton, InfoFilled } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import { apiLogout } from '@/request/admin'

const router = useRouter()

const links = [
    {
        icon:"TrendCharts",
        name: '首页',
        link: '/home'
    },
    {
        icon:"Management",
        name: '场地管理',
        link: '/home/gymManage'
    },
    {
        icon:"Checked",
        name: '场地维护',
        link: '/home/gymMaintain'
    },
    {
        icon:"List",
        name: '用户管理',
        link: '/home/usersManage'
    },
    {
        icon:"UserFilled",
        name: '个人信息',
        link: '/home/profile'
    },
];

// 处理退出登录
const submit = () => {
    ElMessageBox.confirm(
        '确定要退出登录吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
    .then(() => {
        apiLogout()
        // 清除token
        localStorage.clear()
        // 跳转到登录页
        router.replace('/')
    })
    .catch(() => {
        // 取消退出
    })
}

// 处理关于按钮点击
const handleAbout = () => {
    ElMessageBox.alert(
        '广软运动场馆预约系统v0.1.0',
        '关于',
        {
            confirmButtonText: '确定',
        }
    )
}

</script>

<style scoped>
a {
    text-decoration: none;
    color: #333;
}

.logo {
    width: 75px;
    height: 50px;
}
</style>